"use client"

import { Button } from "@/components/ui/button"
import { api } from "@/convex/_generated/api"
import { Id } from "@/convex/_generated/dataModel"
import { useMutation } from "convex/react"
import { on } from "events"
import { useRouter } from "next/navigation"
import { toast } from "sonner"
import { ConfirmModal } from "../../../components/modals/confirm-modal"

interface BannerProps {
    documentId: Id<"documents">
}
export const Banner = ({ documentId }: BannerProps) => {
    const router = useRouter()
    const remove = useMutation(api.documents.remove)
    const restore = useMutation(api.documents.restore)
    // 删除
    const onRemove = () => {
        const promise = remove({ id: documentId })
        toast.promise(promise, {
            loading: "Removing note...",
            success: "Note removed!",
            error: "Failed to remove note."
        })
        router.push("/documents")
    }
    // 恢复
    const onRestore = () => {
        const promise = restore({ id: documentId })
        toast.promise(promise, {
            loading: "Restoring note...",
            success: "Note restored!",
            error: "Failed to restore note."
        })
    }
    return (<div className="w-full bg-rose-500 text-center text-sm p-2 text-white flex items-center gap-x-2 justify-center">
        <p>This page is in the Trash.</p>
        <Button
            size={"sm"}
            onClick={onRestore}
            variant={"outline"}
            className="border-white bg-transparent hover:bg-primary/5 h-auto font-normal p-1 px-2 hover:text-white"

        >
            Restore page
        </Button>
        <ConfirmModal onConfirm={onRemove}>
            <Button
                size={"sm"}
                variant={"outline"}
                className="border-white bg-transparent hover:bg-primary/5 h-auto font-normal p-1 px-2 hover:text-white"
            >
                Delete forever
            </Button>
        </ConfirmModal>

    </div>)
}